import { Component, ElementRef, Renderer2 } from '@angular/core';
import { ApesField } from './apes-field';
import { ApiService } from '@core/services/http/api.service';
import { Events } from '@core/services/events/Events';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { SubjectService } from '@core/services/events/subject.service';
import { exists } from '../../../../utils/utils';
import { map, mergeMap } from 'rxjs/operators';

@Component({
  selector: 'formly-field-note',
  template: `
    <div>
      <!--时间轴日志-->
      <apes-timeline>
        <apes-timeline-item *ngFor="let tmp of checkNotes()"
                            [apesType]=true
                            [apesOA]="tmp.oaFlag"
                            class="apes-timeline-type">


          <div class="apes-timeline-main">
            <!-- 左边部分 -->
            <div class="apes-timeline-main-top">
              <!-- 操作事件 -->
              <div class="apes-timeline-operate">
                <i apes-icon apesType="calendar"></i>
                {{tmp.operate}}
              </div>
              <!-- 操作人员 -->
              <div class="apes-timeline-name">
                <span>
                    <i apes-icon apesType="user"></i>
                  {{tmp.operator.name}}
                  </span>
                <span *ngIf="tmp.workPostName != undefined">
                    ({{tmp.workPostName}})
                  </span>
              </div>
              <!-- 操作时间 -->
              <div class="apes-timeline-date">
                <i apes-icon apesType="clock-circle"></i>
                {{getDateTime(tmp.businessDate)}}
              </div>
            </div>
            <!-- 底部部分 -->
            <div class="apes-timeline-main-bottom">
              <!-- 操作备注 -->
              <textarea apes-input
                        class="apes-timeline-remark"
                        rows="2"
                        readonly="ture"
                        *ngIf="tmp.remark">{{tmp.remark}}</textarea>
              <ng-container *ngIf="tmp.audit">
                <div *ngFor="let editor of initAudit(tmp.audit)">
                  <span>· {{editor.f}} : </span>
                  <ng-container *ngIf="editor.o && editor.n">
                    <span>{{editor.o}}</span>
                    <span> → </span>
                    <span>{{editor.n}}</span>
                  </ng-container>
                  <ng-container *ngIf="editor.o && !editor.n">
                    <span>{{editor.o}}</span>
                    <span> → </span>
                    <span>“ ”</span>
                  </ng-container>
                  <ng-container *ngIf="!editor.o && editor.n">
                    <span>“ ”</span>
                    <span> → </span>
                    <span>{{editor.n}}</span>
                  </ng-container>

                </div>
              </ng-container>
            </div>
          </div>
        </apes-timeline-item>
      </apes-timeline>
    </div>
  `,
  styles: [`

  `],
})
export class FormlyFieldNote extends ApesField {

  notes: any[] = [];
  ctx: any;

  constructor(protected apiService: ApiService, protected events: Events, protected expressionService: ExpressionService, protected subject: SubjectService,
              protected elementRef: ElementRef, protected renderer: Renderer2) {
    super(apiService, events, expressionService, subject);
  }

  ngOnInit() {
    this.initNote();
  }

  initNote(){
    this.notes = [];
    this.ctx = this.formState;
    let data = this.model;
    if (exists(data.innerBusinessKey) && exists(data.innerBusinessType)) {
      this.apiService.post('ir.logger.find', {
        businessKey: data.innerBusinessKey,
        businessType: data.innerBusinessType,
      })
        .pipe(
          map((body) => {
            return body;
          }),
        ).subscribe((body) => {
        this.notes = body;
      });
    }
  }

  checkNotes(){
    return this.notes;
  }

  getDateTime(datetime) {
    return datetime;
  }

  initAudit(audit){
    let show = JSON.parse(audit);
    return show;
  }

}
